import React, { Component } from 'react'
import './index.css'
const myusername= React.createContext()//创建一个上下文
//解构赋值
const {Provider,Consumer}=myusername
export default class A extends Component {
    state = {username:'tom',age:18}
    render() {
        const {username,age} = this.state
        return (
            
            <div className="parent">
                <h3>a:{username}</h3>
                <myusername.Provider value={{username,age}}>
                    <B/>
                </myusername.Provider>
               {/* <Provider></Provider> */}
            </div>
        )
    }
}
class B extends Component {
    render() {
        return (
            <div className="child">
                <h3>a传过来的name:</h3>
                <C/>
                {/* <C username={this.props.username}/> */}
            </div>
        )
    }
}
// class C extends Component {
//     //声明接收
//     static contextType=myusername
//     render() {
//         return (
//             <div className="grand">
//                 <h3>b传过来的name:{this.context.username}</h3>
//             </div>
//         )
//     }
// }
function C(){

        return (
            <div className="grand">
                <h3>b传过来的name:
                    <Consumer>
                        {
                            value=>{
                                return `${value.username}`//<span>{value.username}</span> 
                            }
                        }
                    </Consumer>
                </h3>
            </div>
        )
    
}
